import React, { PureComponent } from "react";
import { connect } from "dva";
import moment from "moment";
import { Modal, Row, Col, Form, Icon, Input } from "antd";

const FormItem = Form.Item;
const { TextArea } = Input;


@connect()
@Form.create()
export default class WhiteListAdd extends PureComponent {
  constructor(props) {
    super(props);
  }


  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.callback(values);
      }
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  };

  handleCancel = () => {
    this.handleReset();
    this.props.onCancel(false);
  };

  handleAgreementCancel = () => {
    this.setState({
      agreement_visible: false
    });
  };

  getAgreement(e) {
    e.preventDefault();

    this.setState({
      agreement_visible: true
    });
  }



  render() {
    const { warninfo, visible, dictionaries } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    };

    const deviceType = dictionaries.deviceType && dictionaries.deviceType.length>1
      ? dictionaries.deviceType.map(item=>item.label)
      :[];

    return (
      <div>
        <Modal
          title={<span><Icon type="exclamation-circle" style={{marginRight:10,color:'#FFD113'}}/>以下告警将被关闭：</span>}
          okText={"确认关闭"}
          visible={visible}
          onOk={this.handleSubmit.bind(this)}
          // confirmLoading={loading.submitting}
          onCancel={this.handleCancel}
        >
          <Form layout="horizontal">
            <Row gutter={24}>
              <Col span={24} style={{marginBottom:20}}>
                <FormItem {...formItemLayout} label="告警ID:" colon={false} style={{marginBottom:0}}>
                  {warninfo && warninfo.warnId}
                </FormItem>
                <FormItem {...formItemLayout} label="设备编号:" colon={false} style={{marginBottom:0}}>
                  {warninfo && warninfo.devId}
                </FormItem>
                <FormItem {...formItemLayout} label="设备名称:" colon={false} style={{marginBottom:0}}>
                  {warninfo && warninfo.devName}
                </FormItem>
                <FormItem {...formItemLayout} label="设备类型:" colon={false} style={{marginBottom:0}}>
                  {warninfo && warninfo.devType && deviceType[parseInt(warninfo.devType)-1]}
                </FormItem>
                <FormItem {...formItemLayout} label="告警发生时间:" colon={false} style={{marginBottom:0}}>
                  {warninfo && warninfo.createTime && moment(warninfo.createTime).format("YYYY-MM-DD HH:mm")}
                </FormItem>
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout} label="关闭描述:" colon={false}>
                  {getFieldDecorator("handleDesc", {
                    rules: [
                      {
                        required: true,
                        message: "请输入关闭告警的原因"
                      }
                    ]
                  })(
                    <TextArea
                      placeholder="请输入关闭告警的原因"
                      autosize={{ minRows: 3, maxRows: 6 }}
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
